<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            /* relative 不脱离文档流 */
            /* absolute fixed 脱离文档流 */
        }
    </style>
</head>

<body>
    <div class="box">
        简单快捷萨芬还是根据广东省高级
    </div>
    <script>
        var oBox = document.querySelector('.box');
        oBox.onmousedown = function(e) {
            //IE windown.event;
            // e 高版本
            var ev = e || event;
            // 求 鼠标按下点离当前元素（oBox）的距离
            var disX = ev.offsetX;
            var disY = ev.offsetY;
            document.onmousemove = function(e) {
                var ev = e || event;
                //求 left 和 top 值
                //left = 不断变化的鼠标坐标-蓝线的距离（disX）
                var l = ev.clientX - disX;
                var t = ev.clientY - disY;
                //设置块的 left top值
                oBox.style.left = l + 'px';
                oBox.style.top = t + 'px';
            };
            //抬起之后，清除事件
            document.onmouseup = function() {
                document.onmousemove = null;
            };
            //取消默认行为
            // ev.preventDefault 高版本
            // returnValue = true IE
            ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
        };
    </script>
</body>

</html>